<!-- eslint-disable no-unused-expressions -->
<!--
 * @Author: qiye
 * @LastEditors: qiye
 * @description: page description
 * @Date: 2023-12-08 10:26:53
 * @LastEditTime: 2024-01-04 11:13:44
-->
<script>
import { ikDate } from 'iking-utils'
import {
  firstDayWeek,
  getMonDay,
  lastDayWeek,
  lastMonth,
  lastYear,
  nextMonth,
  nextYear,
  parseTime,
  reorganizeDate
} from './utils/date'
// import './style/style.scss'
import mixins from './mixins'

export default {
  name: 'IkDayCalendar',
  mixins: [mixins],

  props: {
    dotDates: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      monthData: [],
      nowYearMonth: parseTime(new Date(), '{y}-{m}'),
      nowDays: parseTime(new Date(), '{y}-{m}-{d}'),
      nowDay: parseTime(new Date(), '{y}-{m}-{d}'),
      monthTime: parseTime(new Date(), '{y}-{m}')
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.nowYearMonth = this.monthTime
      // 当前月份天数
      const allday = getMonDay(this.monthTime)
      // 月份第一天是星期几
      const firstDay = firstDayWeek(this.monthTime)
      const lastDay = lastDayWeek(this.monthTime, allday)
      // 拆完重组得到的数组 [[],[],[],[],[]]
      this.monthData = reorganizeDate(
        allday,
        firstDay,
        lastDay,
        this.monthTime
      )

      this.$emit('change-dates', this.getDates())
      console.log('this.monthData', this.monthData)
    },
    mouseEnter(item) {
      if (!this.enterShow) {
        //
      }
    },
    mouseLeave(item) {
      if (!this.enterShow) {
        //
      }
    },
    mouseClickNew(item) {
      if (this.nowDays === item.days) {
        //
        this.nowDays = ''
      }
      else {
        //
        this.nowDays = item.days
      }

      this.$emit('click-date', item)
    },
    toToday() {
      console.log('to today ...')
      this.nowDays = parseTime(new Date(), '{y}-{m}-{d}')
      this.nowYearMonth = parseTime(new Date(), '{y}-{m}')
      this.nowDay = parseTime(new Date(), '{y}-{m}-{d}')
      this.monthTime = parseTime(new Date(), '{y}-{m}')
      this.init()
      this.$emit('to-today')
    },

    mouseClick(item, index) {
      if (this.enterShow)
        return

      if (this.nowDays === item.days) {
        this.nowDays = ''
      }
      else {
        this.nowDays === '' ? '' : document.getElementById(`info_${this.nowDays}`).style.display = 'none'
        this.nowDays = item.days
      }
      if (this.nowDays !== '') {
        document.getElementById(`info_${item.days}`).style.left = '63px'
        document.getElementById(`info_${item.days}`).style.top = '-53px'
        document.getElementById(`info_${item.days}`).style.display = 'table'
      }
      else {
        document.getElementById(`info_${item.days}`).style.display = 'none'
      }
    },
    goBack() {
      this.monthTime = lastMonth(this.monthTime)
      this.init()
    },
    goNext() {
      this.monthTime = nextMonth(this.monthTime)
      this.init()
    },
    goBackYear() {
      this.monthTime = lastYear(this.monthTime)
      this.init()
    },
    goNextYear() {
      this.monthTime = nextYear(this.monthTime)
      this.init()
    },
    getCurrentYM(str) {
      return ikDate.toYM(`${str}-01`, 'YYYY年MM月')
    },
    getDates() {
      const dates = []
      for (const row of this.monthData) {
        for (const date of row)
          dates.push({ date: date.days })
      }

      return dates
    }
  }
}
</script>

<template>
  <section :class="theme === 'white' ? 'white-theme' : 'black-theme'" :style="{ 'width': `100%`, 'height': `100%`, 'font-family': ffamily }">
    <div class="calendar-headr">
      <span style="display: flex; justify-content: space-around;align-items: center;">
        <span>
          <el-button type="info" link><el-icon> <DArrowLeft title="上一年" @click="goBackYear()" /></el-icon></el-button>
          <el-button type="info" link><el-icon> <ArrowLeft title="上一月" @click="goBack()" /></el-icon></el-button>
        </span>

        <span style="font-size: 16px; display: flex;align-items: center;">
          <span style="flex-shrink: 0;"> {{ getCurrentYM(nowYearMonth) }}</span>
          <!-- <IkSvgIcon name="iksvg_zhongzhi" @click="toToday" /> -->
        </span>
        <span>
          <el-button type="info" link><el-icon> <ArrowRight title="下一月" @click="goNext()" /></el-icon></el-button>
          <el-button type="info" link><el-icon> <DArrowRight title="下一年" @click="goNextYear()" /></el-icon></el-button>
        </span>

      </span>
    </div>

    <div class="claendar-header-week margin-top-large" style="display: flex;justify-content: space-around;margin-bottom: 16px;">
      <span v-for="week in weekList" :key="week">
        {{ week }}
      </span>
    </div>

    <div
      v-for="(m, index) in monthData"
      :key="`m${index}`"
      class="day-row-item"
      style="display: flex;justify-content: space-around;"
    >
      <div
        v-for="(d, dindex) in m"
        :key="`d${dindex}`"
        :class="[nowDays === d.days ? 'calendar-day-on' : '']"
        class="calendar-day"
        @click="mouseClickNew(d, dindex)"
        @mouseenter="mouseEnter(d)"
        @mouseleave="mouseLeave(d)"
      >
        <section class="day-item-content" :class="[nowDays === d.days ? 'is-selected' : '', !d.now ? 'not-now-month-day' : '']">
          <p style="position: relative;">
            {{ `${d.day}`.length === 1 ? `0${d.day}` : d.day }}
            <span v-if="dotDates.includes(d.days)" class="show-dot"></span>
          </p>
        </section>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.calendar-headr {
  height: 40px;
  line-height: 40px;
  background-color: var(--color-bg-page);
  border-radius: 6px;
}

.show-dot{
  width: 5px;
  height: 5px;
  background-color: var(--el-color-primary);
  border-radius: 50%;
  display: block;
  position: absolute;
  bottom: calc(var(--space-small) * -1);
  right: calc(50% - 2.5px);
}

.claendar-header-week{
  font-size: 18px;
  color: var(--color-font-secondary);
}

.day-item-content{
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &.is-selected{
    background-color: var(--el-color-primary);
    border-radius: 6px;
    color: var(--color-font-reverse);
  }
}

.day-row-item{
  height: 48px;
}

.not-now-month-day{
  color: var(--color-font-disabled);
}
</style>
